<template>
<div class="viewport">
    <div class="pro-search viewport">
        <div class="search-container gray borderd">
            <div class="left-icon" onclick="history.go(-1)">
            <img src="@/assets/img/icon-back.png" alt="">
            </div>
            <form class="search-form" onsubmit="return false;">
            <div class="searchBarWrapper">
                <router-link to="/search">
                <div class="search-form-box">
                    <div class="search-form-input">
                        <input type="text" placeholder="搜索商品" readonly="" value="">
                    </div>
                </div>
                </router-link> 
            </div>
            </form>
            <div class="right-icon">
            <img class="moreImg" src="@/assets/img/icon-moreNav.png" alt="">
            <i></i>
            </div>
        </div>
        <div class="searchSort">
            <ul class="clearfix">
            <li id="sortOrdinary" class="">
                <span>综合</span>
            </li>
            <li id="sortSalsNum" class="">
                <span>销量</span>
            </li>
            <li id="sortPrice" class="active up">
                <span>价格</span>
            </li>
            <li class="open-screen">
                筛选
                <img class="icon-filter" src="@/assets/img/icon-filter.png">
            </li>
            </ul>
        </div>
    </div>
    <!--这是商品列表-->
    <!--<div class="no-result viewport">
      <img src="@/assets/img/img_empty.png" alt="">
    </div>-->
    <div class="pro-container large-show">
        <ul class="clearfix">
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</div>
</template>
<script>
    
</script>
<style scoped>
.pro-search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;
}
.search-container.borderd {
    border-bottom: 1px solid #eee;
}

.search-container {
    position: relative;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    z-index: 10;
    width: 100%;
    height: .88rem;
}
.pro-search .search-container .left-icon {
    padding-top: 0;
}
.search-container .left-icon {
    display: inline-block;
    height: 100%;
    position: absolute;
    left: .3rem;
    top: .12rem;
    width: .64rem;
    height: .64rem;
    padding-top: .14rem;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
}
.pro-search .search-container .left-icon img {
    width: 100%;
    height: 100%;
}
.search-container .left-icon img {
    display: inline-block;
    width: .4rem;
    height: .36rem;
}
.pro-search .search-container .search-form {
    padding: 0 1.28rem;
}
.search-container .search-form {
    display: inline-block;
    height: 100%;
    width: 100%;
    padding: 0 1.4rem;
}

.search-container .search-form .searchBarWrapper {
    padding-top: .12rem;
}

.search-container.gray .search-form-box {
    background: #F2F2F2;
}

.search-container .search-form .search-form-box {
    position: relative;
    height: .64rem;
    line-height: .64rem;
    background-color: #fff;
    border-radius: 9999px;
    overflow: hidden;
}
.pro-search .search-container .search-form .search-form-input {
    padding-left: .32rem;
    background: #f2f2f2;
}
.search-container .search-form .search-form-input {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0 .72rem;
}

.search-container .search-form .search-form-input input {
    margin-top: .08rem;
    width: 100%;
    height: .48rem;
    line-height: .48rem;
    font-size: 0.26rem;
    background: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pro-search .search-container .right-icon {
    padding-top: 0;
}
.search-container .right-icon {
    display: inline-block;
    height: 100%;
    position: absolute;
    right: .32rem;
    top: .12rem;
    width: .64rem;
    height: .64rem;
    padding-top: .14rem;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
}

.pro-search .search-container .right-icon img {
    width: 100%;
    height: 100%;
}
.search-container .right-icon img {
    display: inline-block;
    width: .4rem;
    height: .36rem;
}

.pro-search .searchSort {
    width: 100%;
    height: .96rem;
    line-height: .96rem;
    font-size: .3rem;
    color: #424242;
    background-color: #fff;
    border-bottom:1px solid #f2f2f2;
}
.pro-search .searchSort li {
    float: left;
    width: 25%;
    text-align: center;
}
.pro-search .searchSort li .icon-filter {
    margin-left: -0.1rem;
    width: .32rem;
    height: .32rem;
    vertical-align: -6%;
}
.large-show{
    margin-top:1.7rem;
}

.no-result {
    position: fixed;
    top: 1.84rem;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: #F2F2F2;
}
.no-result img {
    margin-top: 1.6rem;
    width: 4.42rem;
    height: 5.34rem;
}

</style>